<template>
  <view>
    <!-- 订单功能区 -->
    <view class="function-section">
      <view class="section-title">我的订单</view>
      <view class="order-grid">
        <view
          class="order-item"
          v-for="item in orderItems"
          :key="item.text"
          @tap="onOrder"
        >
          <image class="icon" :src="item.icon" mode="aspectFit" />
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 优惠券功能区 -->
    <view class="function-section">
      <view class="section-title">我的优惠券</view>
      <view class="coupon-grid">
        <view class="coupon-items" v-for="item in couponItems" :key="item.text">
          <image class="icon" :src="item.icon" mode="aspectFit" />
          <!-- 这里改为icon -->
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

import Taro from "@tarojs/taro";

// 订单图标
import pendingPaymentIcon from "@/assets/imgs/wall.svg";
import tosendIcon from "@/assets/imgs/wait.svg";
import logisticsIcon from "@/assets/imgs/auto.svg";
import afterSaleIcon from "@/assets/imgs/hexiao.svg";
// import moreIcon from "@/assets/imgs/more.svg";

// 优惠券图标
import couponIcon from "@/assets/imgs/hexiaoma.svg";
import usedIcon from "@/assets/imgs/wangdian.svg";
import expiredIcon from "@/assets/imgs/tuijian.svg";
// import giftIcon from "@/assets/imgs/gift.svg";

const orderItems = ref([
  { icon: pendingPaymentIcon, text: "待付款" },
  { icon: tosendIcon, text: "待核销" },
  { icon: logisticsIcon, text: "已完成" },
  { icon: afterSaleIcon, text: "扫描订单" },
]);

const couponItems = ref([
  { icon: couponIcon, text: "消费码" },
  { icon: usedIcon, text: "我的网体" },
  { icon: expiredIcon, text: "我的推荐" },
]);

const onOrder = () => {
  Taro.navigateTo({
    url: "/pages-detail/my/order",
  });
};
</script>

<style lang="css">
.function-section {
  background: #fff;
  margin: 30rpx;
  border-radius: 20rpx;
  padding: 0 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}

.function-section .section-title {
  padding: 30rpx 0;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5;
}

.function-section .order-grid {
  display: flex;
  padding: 30rpx 0;
}

.function-section .order-grid .order-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.function-section .order-grid .order-item .icon {
  width: 48rpx;
  height: 48rpx;
}

.function-section .order-grid .order-item text {
  margin-top: 16rpx;
  font-size: 26rpx;
  color: #666;
}

.function-section .coupon-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
}

.function-section .coupon-grid .coupon-items {
  width: 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.function-section .coupon-grid .coupon-items .icon {
  width: 48rpx;
  height: 48rpx;
}

.function-section .coupon-grid .coupon-items text {
  margin-top: 16rpx;
  font-size: 26rpx;
  color: #666;
}
</style>
